import React, { FC, ReactElement } from 'react';
import { Popover } from '@douyinfe/semi-ui';

interface IProps {
  message: string;
  maxLength: number;
}

const EllipseRender: FC<Partial<IProps>> = ({
  message = '',
  maxLength = 10,
}): ReactElement => {
  if (!message?.length) {
    return <span>-</span>;
  }
  if (message.length < 10) {
    return <span>{message}</span>;
  }
  return (
    <Popover
      position="topLeft"
      content={(
        <pre style={{ padding: 8, boxSizing: 'border-box' }}>
          {message}
        </pre>
      )}
      showArrow
    >
      <span>{message.slice(0, maxLength)}...</span>
    </Popover>
  );
}

export default EllipseRender;
